<!--
 * Tencent is pleased to support the open source community by making Tars available.
 *
 * Copyright (C) 2016 THL A29 Limited, a Tencent company. All rights reserved.
 *
 * Licensed under the BSD 3-Clause License (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * https://opensource.org/licenses/BSD-3-Clause
 *
 * Unless required by applicable law or agreed to in writing, software distributed
 * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
 * CONDITIONS OF ANY KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations under the License.
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-table.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/bootstrap-table.min.js"></script>
    <script src="../js/template.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/chart.min.js"></script>
</head>
<body>

<div class="table-box">
    <div id="ser-box" class="mt10" style="width: 800px;height: 400px;">
        <canvas id="myChart" width="400" height="200"></canvas>
    </div>

    <button id="btn">刷新</button>
</div>

<script>
    Chart.defaults.global.tooltips.intersect=false;
    Chart.defaults.global.elements.line.borderWidth=1;
    Chart.defaults.global.elements.line.borderColor='rgba(88,162,233,1)';
    Chart.defaults.global.elements.line.backgroundColor='rgba(88,162,233,0.3)';
    Chart.defaults.global.elements.point.radius=0;
    Chart.defaults.global.legend.display=false;
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels : ["January","February","March","April","May","June","July"],
            datasets : [
                {
                    data : [65,59,90,81,56,55,40]
                },
                {
                    data : [28,48,40,19,96,27,55]
                }
            ]
        }
    });
    $('#btn').click(function () {
        myChart.data.datasets[0].data[5]=100;
        myChart.update();
    });
    console.log(Chart.defaults);
</script>
</body>
</html>
